﻿<html>
<head>
<title>Complex Layout</title>
    <link href="../Scripts/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    p{margin:5px;}
    .settings {background-image:url(../scripts/extjs/examples/shared/icons/fam/folder_wrench.png);}
    .nav {background-image:url(../scripts/extjs/examples/shared/icons/fam/folder_go.png);}
    .info {background-image:url(../scripts/extjs/examples/shared/icons/fam/information.png);}
    .pico {text-indent:18px;background:url(../scripts/extjs/examples/shared/icons/fam/grid.png) no-repeat 1px -1px;cursor:pointer}
    .cpr {background-image:url(../scripts/extjs/examples/shared/icons/fam/cog.png);}
    </style>
    <script src="../Scripts/extjs/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
    Ext.require(['*']);
    Ext.onReady(function () {
        Ext.QuickTips.init();
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
        var viewport = Ext.create('Ext.Viewport', {
            id: 'border-example',
            layout: 'border',
            items: [
                Ext.create('Ext.Component', {
                    region: 'north',
                    height: 32,
                    autoEl: {
                        tag: 'div',
                        html: '<p></p>'
                    }
                }), {
                    region: 'south',
                    height: 30,
                    margins: '0 5 5 5'
                }, {
                    region: 'west',
                    stateId: 'navigation-panel',
                    id: 'west-panel', // see Ext.getCmp() below
                    title: '用户面板',
                    split: true,
                    width: 200,
                    minWidth: 175,
                    maxWidth: 400,
                    collapsible: true,
                    animCollapse: true,
                    margins: '0 0 5 5',
                    layout: 'accordion',
                    items: [{
                        contentEl: 'film',
                        title: '影片管理',
                        iconCls: 'nav'
                    }, {
                        contentEl: 'system',
                        title: '系统管理',
                        iconCls: 'settings'
                    }, {
                        title: 'FAQ',
                        iconCls: 'info'
                    }, {
                        title: '版权信息',
                        iconCls: 'cpr'
                    }]
                },
                Ext.create('Ext.tab.Panel', {
                    region: 'center',
                    deferredRender: false,
                    margins: '0 5 5 0',
                    activeTab: 0,
                    items: [{
                        contentEl: 'center2',
                        title: 'Center',
                        autoScroll: true
                    }]
                })]
        });

        Ext.get("hideit").on('click', function () {
            var w = Ext.getCmp('west-panel');
            w.collapsed ? w.expand() : w.collapse();
        });

        Ext.get('add_film').on('click', function () {
           
        });

    });
</script>
</head>
<body>
    <div id="film" class="x-hide-display">
        <p id="add_film" class="pico">添加电影</p>
        <p id="msn_film" class="pico">影片管理</p>
        <p id="msn_type" class="pico">类别管理</p>
    </div>
    <div id="system" class="x-hide-display">
        <p class="pico">网站公告</p>
        <p class="pico">管理员列表</p>
        <p class="pico">修改密码</p>
        <p class="pico">修改密码</p>
        <p class="pico">登陆日志</p>
        <p class="pico">网站名称</p>
        <p class="pico">底部信息</p>
    </div>
    <div id="center2" class="x-hide-display">
        <a id="hideit" href="#"></a>

    </div>

</body>
</html>
